import React from 'react'
import { connect } from 'react-redux'
import {Tabs, Divider, Form, Radio, Button, Modal, message} from 'antd';
import {messages} from "share/common";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
import DevelopmentPlatformService from 'containers/setting/development-platform/development-platform.service'
import AvailableUser from './available-user'
import InvitePersonModal from "../../enterprise-manage/person-manage/person-manage-components/invite.person.modal";
class DingDing extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      setting: {},
      loading: false,
    };
    this.params = {
      'keyword': '',
      'departmentOIDs': [],
      'corporationOIDs': [],
      'status': 'all',
      directManagerOIDs: [],
    };
  }

  componentWillMount(){
    this.getSetting();
  }


  getSetting = () => {
    DevelopmentPlatformService.getSetting()
      .then((res) => {
        let setting = res.data;
        setting.authScopeListId = setting.authScopeList.map(item => {item.id = item.objectId; return item});
        this.setState({
          setting,
        })
      })
  };

  saveSetting = () => {
    const {setting} = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        this.setState({
          loading: true,
        });
        let param = Object.assign(setting, values);
       DevelopmentPlatformService.saveSetting(param)
         .then((res) => {
           this.getSetting();
           this.setState({
             loading: false,
           });
           this.params= {
             'keyword': '',
             'departmentOIDs': [],
             'corporationOIDs': [],
             'status': 'all',
             directManagerOIDs: [],
           };
           message.success(messages('basic-12.key1')/*保存成功*/);
         }).catch(err => {
         this.setState({
           loading: false,
         })
       })
      }
    })
  };

  handleAvailableUser = (result) => {
    const {setting} = this.state;
    setting.dingtalkAuthType = result.type;
    setting.authScopeList = result.result.map(item => {
      return {objectId: item.id}
    });
    this.setState({
      setting,
    });
  };

  render () {
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 8, offset: 1},
    };
    const {setting, loading} = this.state;
    const {disabled, isDingTalkEnv} = this.props;
    return (
      <div className="left-edge-gap" style={{width: 860}}>
        <div className="bottom-gap">{messages('basic-12.key2')/*设置说明:  基于钉钉平台相关的功能设置，应用范围全租户*/}</div>
        <Form className="new-form">
          {
            isDingTalkEnv &&
              <div>
                <div className="standard-divider-title">{messages('basic-12.key16')/*授权设置*/}</div>
                <FormItem {...formItemLayout} label={messages('basic-12.key17')/*可激活和登录的员工*/}>
                  {setting.dingtalkAuthType &&
                    <AvailableUser
                      onChange={this.handleAvailableUser}
                      defaultValue={{type: setting.dingtalkAuthType, result: setting.authScopeListId}}/>}
                  <div>{messages('basic-12.key18')/*授权范围内的员工才可以在钉钉激活和登录，超级管理员始终可以*/}</div>
                  <div><InvitePersonModal params={this.params}/></div>
                </FormItem>
              </div>
          }
          <div className="standard-divider-title">{messages('basic-12.key3')/*工作流设置*/}</div>
          <FormItem {...formItemLayout} label={messages('basic-12.key4')/*审批对接钉钉工作流*/}>
            {getFieldDecorator('dingtalkWorkflow',{
              initialValue: setting.dingtalkWorkflow
            })(
              <RadioGroup>
                <Radio value={true}>{messages('common.status.enable')/*启用*/}</Radio>
                <Radio value={false}>{messages('basic-12.key5')/*不启用*/}</Radio>
              </RadioGroup>
            )}
            <div>{messages('basic-12.key6')/*若启用，审批将对接钉钉工作流，可在钉钉待办或审批中操作审批*/}</div>
          </FormItem>
          <div className="standard-divider-title">{messages('basic-12.key7')/*考勤设置*/}</div>
          <FormItem {...formItemLayout} label={messages('basic-12.key8')/*差旅申请单对接钉钉考勤*/}>
            {getFieldDecorator('dingtalkAttendance',{
              initialValue: setting.dingtalkAttendance
            })(
              <RadioGroup>
                <Radio value={true}>{messages('common.status.enable')/*启用*/}</Radio>
                <Radio value={false}>{messages('basic-12.key5')/*不启用*/}</Radio>
              </RadioGroup>
            )}
            <div>{messages('basic-12.key9')/*若启用，差旅申请单审批通过后将同步钉钉考勤数据*/}</div>
          </FormItem>
          <Button type="primary"
                  disabled={disabled}
                  onClick={this.saveSetting}
                  style={{marginBottom: 20}}
                  loading={loading}>
            {/*保存*/}
            {messages('common.save')/*保存*/}
          </Button>
        </Form>
      </div>
    )

  }


}
DingDing.contextTypes = {
  router: React.PropTypes.object,
};
function mapStateToProps(state) {
  return {
    isDingTalkEnv: state.main.isDingTalkEnv,
  }
}

const WrappedDingDing = Form.create()(DingDing);
export default connect(mapStateToProps)(WrappedDingDing);
